<template>
    <div id='sendnewsP'>
        <!-- 发布文章文本域 -->
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="text"> </el-input>
        <!-- <button @click="requestAddNews">发布</button> -->
         <el-button type="success" plain @click="requestAddNews">发布</el-button>
         <!-- 显示批量删除的id集合 -->
         <!-- <h1 >{{deleteListId}}</h1> -->
        <!-- 通知显示区域 -->
        <div class='msgArea' >
            <div style="margin:0 auto">
                <el-input placeholder="请输入通知ID" style='width:80%;margin:1rem .2rem;' suffix-icon="el-icon-search" v-model="msgId" @change="searchMsg"></el-input>
                <el-button type="danger" icon="el-icon-delete" circle @click='deleteLists'></el-button>
            </div>
           <ul style="width:95%;margin:0 auto;" v-show='isOnlyList'>
               <li  style="margin:10px 0;border-bottom:1px dotted blue;"  class="clearfloat">
                <h3 style="margin:.3rem 0;">{{onlylist.text}}</h3>
                    <p style="margin:.3rem 0;border:1px dotted blue;">  
                        <input type="checkbox" checked style="width:0.48rem;height:.48rem;margin:0 auto;">
                        <i class="el-icon-close" @click="deleteNews(onlylist.id)" style="color:red "></i>
                        <i class="el-icon-edit-outline" @click="updataShow(onlylist.id)"  ></i>
                    </p>
                </li>
           </ul>
            <ul style="width:95%;margin:0 auto;" v-show='isLists'>
                <li v-for="(item,i) in list" style="margin:10px 0;border-bottom:1px dotted blue;"  class="clearfloat">
                <h3 style="margin:.3rem 0;">{{item.text}}</h3>
                <span>{{item.id}}</span>
                    <p style="margin:.3rem 0;border:1px dotted blue;">
                        <input type="checkbox" :id='item.id' ref='del'  style="width:0.48rem;height:0.48rem;margin:0 auto;">
                        <i class="el-icon-close" @click="deleteNews(item.id)" style="color:red "></i>
                        <i class="el-icon-edit-outline" @click="updataShow(item.id)"  ></i>
                    </p>
                     <!-- 显示当前通知id-->
                     <!-- <h3>id:{{item.id}}</h3> 
                     <i>{{item.time}}</i>      -->
                </li>
            </ul>       
        </div>
        <!-- 分页 -->
        <div class="btn">
                <button v-if='currentPage-1<1?false:true' @click="requestNew(currentPage-1)">上一页</button>
                <button v-if='currentPage-1<1?false:true' @click="requestNew(currentPage-1)" >{{currentPage-1}}</button>
                <button style="background:blue;color:#fff"  @click="requestNew(currentPage)">{{currentPage}}</button>
                <button v-if='currentPage+1>totalPage?false:true'  @click="requestNew(currentPage+1)">{{currentPage+1}}</button>
                <button v-if='currentPage+1>totalPage?false:true'  @click="requestNew(currentPage+1)">下一页</button> 
        </div>
        <!-- 显示当前页 -->
        <!-- <h1>{{currentPage}}</h1> -->
        
        <br><br><br><br><br>
        <br>
    </div>
</template>
<script>
import qs from 'qs'
    export default{
        data(){
            return{
                list:[],
                text:'',
                currentPage:'',
                totalPage:'',
                id:'',  
                msgId:'',
                onlylist:{},
                isOnlyList:false,
                isLists:true,
                deleteListId:[]       
            }
        },
        methods:{
            // 加载显示通知
            requestNews(pageNum){
                    if(!pageNum){
                    //    console.log(1111);
                     pageNum = 1 || pageNum;
                        //  console.log(2222);
                    var url="http://125.210.160.93:8080/SmEdu/pass/msg/findOwn";
                    this.$http.post(url,{pageNum:pageNum,pageSize:10}
                    ).then((res)=>{
                         console.log(res);
                        // console.log(res.data.body);
                        //console.log(res.data.body.reverse());
                        //  console.log(res.data.body.slice(0,2));
                        this.list=res.data.body;
                        this.currentPage=res.data.tail.pageIndex;
                        this.totalPage=res.data.tail.pageAmount;                                            
                    }).catch((err)=>{
                        console.log(err);
                    })
                }
            },
            //搜索单条通知
            searchMsg(){
                 var url="http://125.210.160.93:8080/SmEdu/port/msg/find";
                this.$http.post(url,{msgid:this.msgId}).then((res)=>{
                    console.log(res);
                     this.onlylist=res.data.body;
                     this.isOnlyList=true;
                     this.isLists=false;
                    //console.log(res.data.body);
                }).catch((err)=>{
                    console.log(err);
                })
            },
            // 页码显示通知
            requestNew(pageNum){
                var url="http://125.210.160.93:8080/SmEdu/pass/msg/findOwn";
                this.$http.post(url,{pageNum:pageNum,pageSize:10}).then((res)=>{
                    console.log(res.data.body);
                    this.list=res.data.body;
                    this.currentPage=res.data.tail.pageIndex;
                    this.totalPage=res.data.tail.pageAmount;
                }).catch((err)=>{
                    console.log(err);
                })
            },
            // 添加通知
            requestAddNews(){            
                var url="http://125.210.160.93:8080/SmEdu/pass/msg/add";
                this.$http.post(url,{text:this.text}).then((res)=>{
                    console.log(res);
                    this.requestNews();
                    this.text='';
                }).catch((err)=>{
                    console.log(err);
                })
            },
            //单个删除通知
            deleteNews(id){
                var url="http://125.210.160.93:8080/SmEdu/priv/mess/doDelete";
                this.$http.post(url,{id}).then((res)=>{
                    console.log(res);
                     this.requestNews();
                }).catch((err)=>{
                    console.log(err);
                })
            },
              //批量删除
            deleteLists(id){
                this.deleteListId=[];
                var input=this.$refs.del;
                for(var i=0;i<input.length;i++){
                    if(input[i].checked) {
                        this.deleteListId.push(input[i].id)
                     }
                }
                // this.$http.post(url,{ids:this.deleteListId}).
                console.log(this.deleteListId);
                var url="http://125.210.160.93:8080/SmEdu/priv/mess/doDeletes";
                console.log('/////////////////////////');
                // qs.stringify({ids: [115,116]}, {arrayFormat:'brackets'})
                this.$http.post(url, {ids:this.deleteListId}).then((res)=>{
                    console.log(res);
                     this.requestNews();
                }).catch((err)=>{
                    console.log(err);
                })
            },
            // 修改通知
            updataShow(id){                  
                this.$prompt('修改通知', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',       
                }).then(({ value }) => {
                // console.log(id+'****'+value);
                this.updateNews(id,value);
                 //this.requestNews();
                // console.log('bbbb');
                }).catch(() => {
                console.log(8);
                });
            },
            // 请求修改通知
            updateNews(id,value){
                var url="http://125.210.160.93:8080/SmEdu/pass/msg/update";
                this.$http.post(url,{msgId:id,text:value}).then((res)=>{
                    console.log(res);
                     this.requestNews();
                }).catch((err)=>{
                    console.log(err);
                })
            },
          
        },
         watch:{
            msgId(curVal){
             if(curVal.length==0){
                    this.requestNews();
                    this.isOnlyList=false;
                    this.isLists=true;
                }
            }
        },
        mounted(){
             this.requestNews();
             
        }
    }
</script>
<style scoped>
    #sendnewsP  ul li h3{
        text-align: left;
        width: 92%;
        float:left;  
    }
    #sendnewsP ul li p{
          float:left;  
           width:5%;
           font-size:1.5em;
    }
    /* 清除浮动作用在父元素上 */
    .clearfloat:after{
        display:block;
        clear:both;content:"";
        visibility:hidden;
        height:0
    }
    #sendnewsP .msgArea{
        height:13.3333rem;
        background:#ddd;
        overflow-y:scroll;
    }
     #sendnewsP .btn button{
         width:1.5667rem;
         height:1.0667rem;
         /* color:#fff; */
     }
   
</style>
